<!--
 * @description  : 市管-电子烟经营户
 * @descriptionDetail: 市管-电子烟经营户
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
	<view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <u-dropdown class="u-dropdown" ref="searchDropDown" @open="handlerOpen" @close="handlerClose">
      <u-dropdown-item title="月份" :options="monthOptions" v-model="searchData.taskMonth" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="类型" :options="taskTypeOptions" v-model="searchData.taskType" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="组织" :options="[]" v-model="searchData.orgUuid" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="持证" :options="licOptions" v-model="searchData.isHaveLicense" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="经营状态" :options="retailerLicStatusOptions" v-model="searchData.licStatus" @change="handlerChangeItem"></u-dropdown-item>
    </u-dropdown>
    <u-search
      shape="round"
      :clearabled="true"
      :showAction="true"
      actionText="确定"
      :animation="true"
      placeholder="请输入企业字号、许可证号、地址、电话、任务描述"
      v-model="searchData.companyName"
      @custom="handlerSearch"
    ></u-search>
    <me-table
      :i="0"
      :top="0"
      :index="0"
      :load-data="loadData"
      :init-load="false"
      ref="mescrollItem0"
    >
      <view slot-scope="d">
        <u-row style="border-bottom: 1px solid #e5e5e5; padding: 5px 0px;" @tap="handlerSelectItem(d.data)">
          <u-col span="10">
            <client-item :client="d.data"></client-item>
          </u-col>
          <u-col span="2" style="text-align:right;">
            <u-icon
              name="checkbox-mark"
              color="#2979ff"
              size="38"
              style="margin-right: 10px;"
              v-if="selectedUids.includes(d.data.retailerUuid)"
            ></u-icon>
          </u-col>
        </u-row>
      </view>
    </me-table>
    <!-- 组织机构选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgSelectShow" @close="handlerCloseOrg">
      <org-select :isHybrid="true" @choose="handlerChooseOrg"></org-select>
    </u-popup>
  </view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import OrgSelect from "@/components/org-select.vue"
	import checkService from "@/service/check/check.service"
	import {
		dateUtils,
	} from "@/common/util"
	import ClientItem from './components/client-item.vue';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			MeTable,
			ClientItem,
			OrgSelect,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: "",
				orgSelectShow: false,
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				searchData: { // 查询参数
					companyName: "", // 模糊搜索关键字
					isHaveLicense: "",
					licStatus: "",
					orgUuid: "00000000000000000000105001A6A3A3",
					taskMonth: "",
					taskSource: "",
					taskStatus: "0",
					taskType: "",
					yearCheckCountMax: "",
					yearCheckCountMin: "",
				},
				taskSource: [],
				taskTypeOptions: [],
				taskStatus: [],
				retailerLicStatusOptions: [],
				licOptions: [{
					label: "全部",
					value: "",
				}, {
					label: "持证",
					value: "1",
				}, {
					label: "无证",
					value: "0",
				}, ],
				monthOptions: [],
				// optTaskSource: "",
				planList: [],
				newList: [],
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad(opt) {
			// this.searchData.orgUuid = opt.groupUuid || "";
			this.searchData.taskMonth = opt.taskMonth;
			this.searchData.taskSource = opt.taskSource * 1
			// this.optTaskSource = opt.taskSource;
			console.log(opt)
			this.planList = this.getRouteParam()
		},
		created() {
			// 计划月份选择项
			let nowTime = new Date();
			let nowYear = nowTime.getFullYear();
			let nowMonth = nowTime.getMonth();
			let dFormat = "yyyy年MM月";
			this.monthOptions.push({
				label: dateUtils.dateFormat(dFormat, new Date(nowYear, nowMonth, 0)),
				value: dateUtils.dateFormat("yyyyMM", new Date(nowYear, nowMonth, 0)),
			});
			this.monthOptions.push({
				label: dateUtils.dateFormat(dFormat, new Date(nowYear, nowMonth + 1, 0)),
				value: dateUtils.dateFormat("yyyyMM", new Date(nowYear, nowMonth + 1, 0)),
			});
			this.monthOptions.push({
				label: dateUtils.dateFormat(dFormat, new Date(nowYear, nowMonth + 2, 0)),
				value: dateUtils.dateFormat("yyyyMM", new Date(nowYear, nowMonth + 2, 0)),
			});
			// this.taskStatus = this.$store.state.dicts['TASK_STATUS'];
			this.init()
			// 类型
			let self = this
			let param = {
				taskSource: this.searchData.taskSource,
			}
			return new Promise(resolve => {
				checkService.taskType(param).then(res => {
					if (res.success) {
						console.log(res)
						res.data.forEach(item => {
							if (!this.$u.test.isEmpty(item.text) && !this.$u.test.isEmpty(item.value)) {
								self.taskTypeOptions.push({
									label: item.text,
									value: item.value,
								})
							}
						})
					} else {
						this.$u.toast(res.msg)
					}
				}).catch(err => {
					this.$u.toast(err)
				})
			})
		},
		mounted() {
			this.setRightBtns()
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					// 添加日计划操作
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			init() {
				// 经营状态
				let self = this
				let param = {
					bctPhName: ['RETAILER_LIC_STATUS', ],
				}
				return new Promise(resolve => {
					checkService.organization(param).then(res => {
						if (res.success) {
							res.data.forEach(item => {
								self.retailerLicStatusOptions.push({
									label: item.text,
									value: item.value,
								})
							})
							console.log(res)
						} else(
							this.$u.toast(res.msg)
						)
					}).catch(err => {
						this.$u.toast(err)

					})
				})
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 选中
			handlerSelectItem(item) {
				if (this.selectedUids.includes(item.retailerUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));
			},
			handlerOpen(idx) {
				// 组织机构 2
				idx == 2 && (this.orgSelectShow = true);
			},
			handlerClose(idx) {
				this.orgSelectShow = false;
			},
			handlerChooseOrg(orgs) {
				if (orgs.length == 0) {
					this.$u.toast("请选择组织机构");
					return;
				}
				console.log(orgs[0].id)
				this.searchData.orgUuid = orgs[0].id;
				this.orgSelectShow = false;
				this.$refs.searchDropDown.close();
				this.handlerSearch();
			},
			handlerCloseOrg() {
				this.$refs.searchDropDown.close();
			},
			// 选择搜索条件项
			handlerChangeItem() {
				console.log(this.searchData);
				this.handlerSearch();
			},
			// 列表查询数据
			loadData(page) {
				let param = {
					page: 1,
					limit: 10,
					paras: this.searchData,
				}
				return new Promise(resolve => {
					checkService.eCigarOperatorList(param).then(res => {
						if (res.success) {
							resolve({
								count: res.count,
								data: [...res.data, ],
							})
						} else {
							resolve({
								count: 0,
								data: [],
							})
						}
					}).catch(err => {
						resolve({
							count: 0,
							data: [],
						})
					})
				})
			},
			// 确定
			handlerSure() {
				let self = this
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择任务");
					return;
				}
				this.planList.forEach(item => {
					self.newList.push(item.retailerUuid)
				})
				let idList = self.selectedItems.filter(r => {
					return self.newList.includes(r.retailerUuid)
				})
				if (idList.length > 0) {
					this.$u.hideLoading();
					this.selectedItems.filter(item => {
						if (item.retailerUuid == idList[0].retailerUuid) {
							this.$u.toast(`【${item.companyName}】已存在`);
						}
					})
					return
				}
				this.backPrev({
					paramKey: this.$rp.check.E_CIGAR,
					param: this.selectedItems,
				});
				this.selectedUids = this.selectedItems = [];
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/common/rightMenu.scss";

	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		height: 40px;
		z-index: 999;
	}
</style>
